<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input size="mini" v-model.trim="listQuery.studentName" clearable class="filter-item" style="width: 150px;" placeholder="请输入姓名"/>
      <el-input size="mini" v-model.trim="listQuery.idCard" clearable class="filter-item" style="width: 200px;" placeholder="身份证"/>
      <el-input size="mini" v-model.trim="listQuery.courseName" clearable class="filter-item" style="width: 200px;" placeholder="输入课程名称查询"/>
      <el-input size="mini" v-model.trim="listQuery.courseSectionName" clearable class="filter-item" style="width: 200px;" placeholder="输入章节名称查询"/>
      <el-date-picker
        v-model="dataPicker"
        size="mini"
        type="daterange"
        style="top: -4px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" border size="small" element-loading-text="正在查询中。。。" highlight-current-row>
      <el-table-column align="center" label="记录ID" prop="learningRecordsId" width="80px"/>
      <el-table-column align="center" label="学员ID" prop="studentId" width="80px"/>
      <el-table-column align="center" label="姓名" prop="studentName" width="150px"/>
      <el-table-column align="center" label="身份证" prop="idCard" width="200px"/>

      <el-table-column align="center" label="课程名称" prop="courseName" width="200px"/>、
      <el-table-column align="center" label="章节ID" prop="courseSectionId" width="80px"/>
      <el-table-column align="center" label="章节名称" prop="courseSectionName" width="200px"/>

      <el-table-column align="center" label="开始时间" prop="stadyStartTime" width="200px"/>
      <el-table-column align="center" label="结束时间" prop="stadyEndTime" width="200px" />
      <el-table-column align="center" label="已播放学时(时:分:秒)" prop="duration" width="200px"/>

      <!--<el-table-column align="center" label="章节名称" prop="zhangJieName"/>-->

      <!--<el-table-column align="center" label="创建时间" prop="createDate"/>-->
      <!--<el-table-column align="center" label="操作" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          &lt;!&ndash; <el-button type="primary" size="small" @click="handleCertificate(scope.row)">查询证书</el-button> &ndash;&gt;
          <el-button type="success" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          &lt;!&ndash;<el-button  type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>&ndash;&gt;
        </template>
      </el-table-column>-->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageSize" :limit.sync="listQuery.currentPage" @pagination="getList(listQuery)" />
  </div>
</template>

<style>
  .certificate-fixed .el-dialog{
    width: 500px;

  }
  .zhangjie-span{
    width: 100%;
    white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
  }
  .certificate-div3{
    width: 80%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#20a0ff;
    color: #fff;
    font-size: 16px;
    margin:0 auto;
    margin-top: 20px;
    border-radius: 5px;
  }
  .certificate-div4{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    z-index: 999;
  }
  .certificate-div4 img{
    width: 400px;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

  }
  .certificate-div4 h1 {
    color: #fff;
    font-weight: 500;
    width: 100%;
    margin-top: 30px;
    text-align: center;

  }
  .certificate-div{
    width:400px;
    display: block;
    margin:0 auto;
    height: 551px;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/certificate/bgcer.png);
    background-size: 100% auto;
  }
  .certificate-div .certificate-h1{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding-top: 80px;
  }
  .certificate-div .certificate-h2{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
  }
  .certificate-div .certificate-p{
    text-align: left;
    padding:0 30px;
    line-height: 26px;
    font-size: 14px;
    margin-top:30px;
  }
  .certificate-flex{
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
  }
  .certificate-div1{
    width:118px;
    margin-left: 32px;
  }
  .certificate-div1 img{
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .certificate-div1 p{
    text-align: center;
  }
  .certificate-div2{
    width: 144px;
    position: relative;
    margin-right: 40px;
    height: 136px;
  }
  .certificate-div2 img{
    width:85%;
    position: absolute;
    right: 0;
    top:0;
  }
  .certificate-div2 .certificate-p1{
    position: absolute;
    bottom: 30px;
    right:0;
  }
  .certificate-div2 .certificate-p2{
    position: absolute;
    bottom: 0px;
    right:0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .active{
    background-color: #1e6abc;
    color: white;
  }
  .certDiv{
    margin-bottom: 20px;
    font-size: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>

<script>
import { learningRecord } from '@/api/learningRecord.js'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'CompanyOrder',
  components: { Pagination },
  data() {
    return {
      uploadPath,
      completeInfo: undefined,
      list: undefined,
      total: 0,
      listLoading: true,
      dataPicker: '',
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: '学员姓名不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '学员电话不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '学员身份证不能为空', trigger: 'blur' }
        ],
        studentsType: [
          { required: true, message: '学员类型不能为空', trigger: 'blur' }
        ],

        // lognPasswd: [
        //   { required: true, message: '学员登录密码不能为空', trigger: 'blur' }
        // ],
        courseType: [
          { required: true, message: '课程类型不能为空', trigger: 'blur' }
        ]

      },
      downloadLoading: false,
      seclectType:'',
      dialogFormVisibleCertificate: false,
      batchStudentOrderSelection: [],
      dialogFormVisibleBatchStudentOrder: undefined,
      starLevelStatus: undefined
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化参数
    init: function() {
      this.getList()
    },
    getList(queryData) {
      let data = {}
      if(queryData !== undefined) {
        data = queryData
        console.log(data)
      }
      learningRecord(data)
        .then(response => {
          this.list = response.data.data.data
          this.list.map(item => {
            console.log(item)
            item.stadyStartTime = this.formatDate(new Date(item.stadyStartTime))
            if (item.stadyEndTime) {
              item.stadyEndTime = this.formatDate(new Date(item.stadyEndTime))
            } else {
              item.stadyEndTime = "暂无"
            }
          })
          this.total = response.data.data.totalCount
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    formatDate(date) {
      let Y = date.getFullYear();  // 获取完整的年份(4位,1970)
      let M = date.getMonth();  // 获取月份(0-11,0代表1月,用的时候记得加上1)
      let D =date.getDate();  // 获取日(1-31)
      let H =date.getHours();  // 获取小时数(0-23)
      let Min = date.getMinutes();  // 获取分钟数(0-59)
      let S = date.getSeconds();  // 获取秒数(0-59)
      return `${Y}年${M}月${D}日 ${H}:${Min}:${S}`
    },
    handleFilter() {
      if(this.dataPicker !== "") {
        this.listQuery.stadyStartTime = this.dataPicker[0]+''
        this.listQuery.stadyEndTime = this.dataPicker[1]+''
      }
      this.getList(this.listQuery)
    },
    getCompleteInfo() {
      this.$router.push({ path: '/companyOperateManage/completeInfo' })
    }
  }
}
</script>
